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BACKGROUND OF THE INVENTION 
The invention relates to generating artwork or 
digital images with hot areas for computer program graphical 

10 user interfaces. 

Computer program interfaces have long provided 
user-selectable graphics, such as buttons, as elements 
through which a user may interact with a computer program, 
to select an option or request a service from the program, 

15 for example. In network-based or distributed computer 

program applications, the selection of an interface element 
in a client program on one computer may be directed to 
either that program or to another program, such as a server 
program running on a separate computer. In Internet and 

20 intranet applications, the server program typically resides 
on a server computer remote from the client computer and 
communicating with it through a network connection. 

One widely distributed and used class of client 
program is the HTML browser, such as the Netscape Navigator™ 

25 browser, available from Netscape Communications Corporation 
of Mountain View, California. Browsers typically provide 
support for a number of industry standard protocols, such as 
HTTP (HyperText Transport Protocol), and industry standard 



formats, such as HTML (HyperText Markup Language) . 

An HTML document may include links to other 
resources. Graphically , the simplest form of link is the 
URL (Universal Resource Locator) of the resource displayed 
5 in the familiar form of underlined text. Access to a 

resource may also be provided through an image that a user 
may select to request the resource. The HTML specification 
includes, among other elements, a MAP element and an IMG 
element with an ISMAP attribute for this purpose. The ISMAP 

10 element can be used to define a server-side image map. When 
the user clicks on the image, the ISMAP attribute of the 
element causes the image (x,y) coordinates of location 
clicked to be passed to the server in a derived URL. A MAP 
element may be used with an IMG element to provide a 

15 client-side image map. AREA elements define simple closed 
regions, such as polygons and circles, by their coordinates 
within the image. AREA elements in a MAP element can define 
hot spots or areas on the image and link the hot spots to 
URLs. A hot spot is an area of an image, which may 

20 correspond to graphic object or a section of text, that 
activates a function when selected. 

SUMMARY OF THE INVENTION 

In general, in one aspect, the invention features 

apparatus and methods implementing a technique for creating 

» 

25 an electronic artwork with a hot area. For a selected layer 
of the artwork, a non-transparent region is identified and 
an action is assigned to an area corresponding to the 
non-transparent region, the action defining a function that 
will be activated when the area is selected. The technique 

30 is advantageous in computer application programs that 



- 2 - 



composite images from layers. 

Advantageous implementations of the technique 
include one or more of the following features. The action 
is a URL (Uniform Resource Locator) . The layers of the 
5 artwork are composited and the area and the action are 
converted to a target output format. The target output 
format is HTML (HyperText Markup Language) . A boundary of 
the non-transparent region is calculated and a definition of 
the area is calculated from the boundary. The composited 

10 artwork is written out as an image file and an HTML file is 
written out; the HTML file contains an image map for the 
area and a URL for the action, and refers to the image file. 

Among the advantages of the invention are one or 
more of the following. An image object associated with a 

15 hot spot can be edited, and the hot spot will be conformed 
automatically to the edited object. The content of a layer 
defining a hot spot can be dynamic, that is, computed from 
other data at the time the layers are composited, and the 
hot spot will be conformed automatically to the dynamic 

20 content. Multiple hot spots can easily be created in a. 

composite artwork. The method of assigning hot spots can be 
added easily to any graphics application that supports 
layers. The regions in the artwork layer by which a hot 
spot is defined do not have to be visible in the final 

25 composited image. For example, a visibility attribute of a 
hot spot layer can be set to invisible, and the hot spot 
will still be generated. 

Other features and advantages of the invention will 
become apparent from the following description and from the 

30 claims. 
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BRIEF DESCRIPTION OF THE DRAWINGS 
FIG. 1 is a schematic diagram of user interface 
elements in accordance with the present invention. 

FIG. 2 is a flow chart of a method for creating a 
5 hot spot in an electronic artwork in accordance with the 
present invention . 



DETAILED DESCRIPTION 
A wide variety of systems exist by which a user, 
such as an artist, can generate an electronic artwork. 

10 Graphics applications that is, computer programs designed 
to enable a user to manipulate data or images, or to create 
images from data or from a library of shapes -- enable the 
user to produce an electronic artwork (a picture) 
interactively. Two such applications are Adobe® Illustrator 

15 and Adobe® Photoshop, available from Adobe Systems 

Incorporated of San Jose, California. In general, a picture 
can include text, images, and shapes. 

Many graphics applications build a final image by 
compositing several image layers together. The image layers 

20 may be thought of as stacked sheets of acetate, with 
transparent and non-transparent areas. In computer 
programs, the color and density of the ink on the acetate 
sheet are generally represented by a color value and an 
opacity (or "alpha") value, respectively. 

25 Each layer typically includes image data, an 

optional mask, and compositing controls. Typically, the 
image data is represented by an array of pixels, with each 
pixel having a color and, optionally, an opacity. 
Typically, too, the mask is represented by an array of 

30 pixels, with each pixel having an opacity. Alternatively, 
the image data or the mask or both can be defined 
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analytically, e.g., by using shape outlines, or by other 
functions that map positions to color and opacity. In 
addition, the image data and the mask can be dynamic, i.e., 
computed from other data at the time the layers are 
5 composited. 

FIG. 1 shows in schematic form a conventional 
application window 102 displayed on a computer display 
device by the graphical user interface of a graphics 
application. Within the window 102 are displayed a window 

10 104 showing a picture, and a layers palette window 106 and a 
layer options dialog box 108 providing information and 
controls in accordance with invention, by which a user can 
cause a hot spot to be assigned to an area of the picture. 

As shown in FIG. 2, a method 200 of assigning a hot 

15 spot to an area in an electronic artwork operates in the 
context of a digital image (that is, a picture) of a kind 
that has or can have layers. Through a user interface, the 
user performs a group of steps (steps 202) to select a layer 
(which may involve creating a layer) (step 204), to assign a 

20 hot spot to the selected layer (step 206) , to select a shape 
for the hot spot (step 208), and to select an action 
identifier, such as a URL, for the hot spot (step 210) . 

The foregoing steps can be performed by the user 
through the layer options dialog box 108 (FIG. 1), as 

25 follows. The user enters a name in name box 110. This name 
will be one of the names NAMEi through NAME n of the layers of 
the picture, which names are shown in the layers palette 
rows 112-1 through 112-n. The name box 110, like the shape 
box 116 and the URL input box 118, can be implemented to 

30 provide pull-down menus showing permissible or most recently 
used values. 
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By checking check box 114, the user indicates that 
the selected layer is to be used to define the area of a hot 
spot. In the illustrated implementation, this is done by 
creating an image map. The shape of the hot spot is 
5 indicated by the user in shape box 116 and the action to be 
associated with the hot spot is indicated in URL box 118. 
In the illustrated implementation, the permitted shapes are 
those supported by a target HTML format, namely rectangle, 
circle, and polygon, and the actions supported are URLs 

10 (Uniform Resource Locators) . When a hot spot has been 

assigned to a layer, the assigned URL is displayed with the 
layer name, as indicated in rows 112-1 and 112-n. If no hot 
spot has been assigned, no URL would appear. The 
application associates the hot spot information — the shape 

15 and the URL — with the layer as a property of the layer. 

At some time, the user will instruct the application 
to produce a form of output that includes hot spots (step 
220, FIG. 2) . In the illustrated implementation, in which 
the hot spot is an area of the picture and the target file 

20 format is HTML, this can occur when the user requests the 

application to show a preview of the artwork in a browser or 
when the user requests the application to export the artwork 
as an image file referred to by a generated HTML file. 
In response to the request, the application 

25 composites the layers of the picture, as it would have done 
in the absence of hot spots, and the application prepares 
the hot spot information for output or display, as will now 
be described. If the graphics application supports dynamic 
content in layers, the dynamic content for the layers used 

30 to define hot spots is calculated before the hot spots are 
calculated. 
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In selecting a layer to define a hot spot, the user 



will naturally select a layer that has one or more 
non-transparent regions in a transparent frame. The 
non-transparent region or regions in combination define the 
5 area of the hot spot. Each non-transparent region is 

converted to a perimeter boundary path to which the selected 
shape is fit (step 222) . This may be done by tracing the 
outer boundary of each non-transparent region in the layer. 



10 scanned and a 1-bit deep bitmap is created for each 

non-transparent region. For each identified non-transparent 
region, the outer boundary is traced to create a polygon 
approximating the outer boundary of the region's original 
pixels. If shape other than a polygon is requested, the 

15 polygons are converted to the requested shape. The union of 
the one or more shapes formed in this way defines the area 
of the hot spot, which may be non-contiguous and therefore 
may generate multiple image maps in an HTML implementation. 



20 follows. The pixels in a copy of the layer (which may be a 
partial copy) are scanned in a regular fashion. When the 
first non-transparent pixel is found, it is given a 
recognizable value and is used as a seed pixel in a seed 
fill algorithm that is applied to find all contiguous 

25 non-transparent pixels, each of which is given the same 

recognizable value. In this way, the application finds a 
contiguous region in the layer. The bounding box of the 
region (the minimum rectangle that includes all pixels of 
the region) is calculated and stored to use in optimizing 

30 later processing. The scanning process is then resumed. 
When a non-transparent pixel is found, the application 



In one implementation, the pixels in the layer are 



In one implementation, the regions are found as 
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determines whether it is part of a region that has already 
been found. If it is not, it is given a different 
recognizable value and the process of finding the extent of 
the new region is repeated beginning with this new seed 
5 pixel. The process continues until all pixels have been 
scanned. 

In one implementation, any holes within a region are 
ignored. In an alternative implementation, a region having 
holes is separated to create separate regions that do not 

10 contain holes, and the shapes formed from the separate 

regions contribute to defining the area of the hot spot, as 
has been described. 

Having information necessary to specify a hot 
spot — namely one or more formed shapes and a URL (or other 

15 action request) — the application converts this information 
in the target output format, such as HTML (step 224) . 

The application may also have to convert the 
composited picture to a target output format, such as GIF 
(Graphics Interchange Format) , JPEG (Joint Photographic 

20 Experts Group) , or PNG (Portable Network Graphics) . 

Having both the composited picture (from step 230) 
and the hot spot information in the target output format 
(from step 224), the application can write the composited 
image with the hot spot information as a file, display it on 

25 a display device, or print it. In the illustrated 
implementation, the target output format is HTML. 

The invention can be implemented in digital 
electronic circuitry or in computer hardware, firmware, 
software, or in combinations of them. Apparatus of the 

30 invention can be implemented in a computer program product 
tangibly embodied in a machine-readable storage device for 
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execution by a computer processor; and method steps of the 
invention can be performed by a computer processor executing 
a program to perform functions of the invention by operating 
on input data and generating output. Suitable processors • 
5 include, by way of example, both general and special purpose 
microprocessors. Generally, a processor will receive 
instructions and data from a read-only memory and/or a 
random access memory. Storage devices suitable for tangibly 
embodying computer program instructions include all forms of 

10 non-volatile memory, including by way of example 

semiconductor memory devices, such as EPROM, EEPROM, and 
flash memory devices; magnetic disks such as internal hard 
disks and removable disks; magneto-optical disks; and CD-ROM 
disks. Any of the foregoing can be supplemented by, or 

15 incorporated in, specially-designed ASICs 

(application-specific integrated circuits) . 

Other implementations are within the scope of the 
following claims. 

What is claimed is: 
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